<template>
  <view class="operation-member">
    <view
      v-if="isLeader"
      class="operation-member-dismiss"
      @tap="handleOperate('dismiss')"
    >
      <text>解散团队</text>
      <text class="operate-icon"></text>
    </view>
    <view
      v-if="isShowCancelBtn"
      @tap="handleOperate('out-group')"
      class="operation-member-dismiss"
    >
      <text>退出团</text> <text class="operate-icon"></text
    ></view>
    <view
      v-if="isLeader && hasMember"
      class="operation-member-remove"
      :style="memberRemoveStyle"
      @tap="handleOperate('remove-member')"
    >
      <text>{{ removeButtonText }}</text> <text class="operate-icon"></text>
    </view>
  </view>
</template>
<script>
const Button_Right = require("@/assets/icon/group-right.png");
export default {
  props: {
    isRemoveStatus: {
      type: Boolean,
      required: true
    },
    /**是否有成员加入 */
    hasMember: {
      type: Boolean,
      default: false
    },
    /**团信息 */
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      Button_Right
    };
  },
  computed: {
    removeButtonText() {
      return this.isRemoveStatus ? "取消移出" : "移出团员";
    },
    /**是否为团长 */
    isLeader() {
      return !!this.groupInfo?.is_leader;
    },
    /**是否显示退出团的按钮 */
    isShowCancelBtn() {
      return !this.isLeader && this.groupInfo?.in_group;
    },
    memberRemoveStyle() {
      return this.isRemoveStatus ? { "background-color": "#FFEEA9" } : {};
    }
  },
  methods: {
    handleOperate(type) {
      if (!type) return;
      this.$emit("operate", type);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
@import "../scss/group-common.scss";
.operation-member {
  margin: 0 auto 70px;
  display: flex;
  justify-content: center;
  view {
    width: 184px;
    background: #fffbea;
    border: 2px solid #f6cd88;
    border-radius: 100px;
    text-align: center;
    line-height: 58px;
    box-sizing: border-box;
    @include base-text(58px, 24px, #a13d0f, 400);
  }
  &-remove {
    margin-left: 32px;
  }
  &-dismiss,
  &-remove {
    display: flex;
    align-items: center;
    padding-left: 32px;
    .operate-icon {
      display: block;
      width: 32px;
      height: 32px;
      @include setBgi("~@/assets/icon/group-right.png");
    }
  }
}
</style>
